<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>商品详情</title>
		<!--公用css-->
		<link rel="stylesheet" type="text/css" href="../common/css/meta.css" />
		<link rel="stylesheet" type="text/css" href="../common/css/rest.css" />
		<link rel="stylesheet" type="text/css" href="../common/css/mui.min.css" />
		<!--公用轮播css-->
		<link rel="stylesheet" type="text/css" href="../common/css/swiper.min.css" />
		<!--mui内置额外的图标-->
		<link rel="stylesheet" type="text/css" href="../common/css/icons-extra.css" />
		<!--导航栏公用css-->
		<link rel="stylesheet" type="text/css" href="../common/css/nav_bar.css" />
		<!--本界面css-->
		<link rel="stylesheet" type="text/css" href="css/hf_details.css" />
	</head>

	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav"></a>
			<span class="mui-title-font">商品详情</span>
			<a href="#"><span class="mui-icon mui-icon-more  mui-pull-right mui-action-menu "></span></a>
		</header>

		<!--------------------------->
		<div class="mui-content">
			<!--轮播开始-->
			<div class="banner_box swiper-container">
				<div id="banner" class="swiper-wrapper">
					<div class="swiper-slide"><img src="img/member1.png">
					</div>
					<div class="swiper-slide"><img src="img/member2.png">
					</div>
					<div class="swiper-slide"><img src="img/member3.png">
					</div>
				</div>
				<div class="swiper-pagination"></div>
				<span id="font_left">￥72</span>
				<span id="font_left1">￥178</span>
				<span id="font_right">已售4630</span>
			</div>

			<div class="mui-card">
				<div class="mui-card-header"><span class="f_14 f_gray_666">Cosme No.1</span><br />Unicharm尤妮佳超级省水1/2化妆棉 40枚/盒 </div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						日本COSME大赏化妆棉类的第一位，也是日本连续10年销售量NO.1，被誉为最好用的化妆棉~只要用1/2的润肤水就令人惊奇的化妆棉布。采用天然棉成份，经高温消毒，特许制法不含各种荧光剂和添加料。配合家里高端的化妆水，用起来都不心疼！一盒40片，中间可以一分为二，也就是80片；泡完水以后还可以再撕开两半用，就是160片，每次敷水膜差不多用6片。天天敷也就一个月，一个月十几块真的是便宜的不要不要滴！
					</div>
				</div>
				<div class="mui-card-footer">
					<span>邮费:￥8.00</span>
					<span class="mui-card-content-inner">由堆唐商店直接发货</span>
				</div>
				<div class="mui-card-footer">
					<span class="mui-card-footer_span">享包邮</span>
					<span class="mui-card-content-inner">满88元享受包邮</span>
				</div>
				<div class="mui-card-footer">
					<span class="mui-icon mui-icon-checkmarkempty mui_icon_diy"></span>
					<span class="f_14 "> 正品保障</span>
					<span class="mui-icon mui-icon-checkmarkempty mui_icon_diy"></span>
					<span class="f_14 "> 1小时客服响应</span>
					<span class="mui-icon mui-icon-checkmarkempty mui_icon_diy"></span>
					<span class="f_14 "> 7天无忧退货</span>
				</div>
			</div>
			<!--用户口碑部分-->
			<div class="mui-card">
				<div class="mui-card-content mui-koubei">用户口碑</div>
				<div class="mui-card-header mui-card-media">
					<img src="img/jiaju10.png" />
					<div class="mui-media-body">
						梨涡酱酱酱
						<p>发表于 2016-11-11 13:11</p>
					</div>
				</div>
				<div class="mui-card-content-inner">
					#安利好货#尤妮省水化妆棉，真的超级无敌省水，类似海绵质地可以吸收并释放水分，便宜又好用。
				</div>
			</div>
			<!--详情-->
			<div class="mui-card">
				<div class="mui-card-content mui-koubei">图文详情</div>
				<div class="mui-card-content-inner">
				</div>
				<div class="mui-card-footer">
					品牌：Unicharm/尤妮佳
				</div>
				<div class="mui-card-footer">
					品类：化妆棉
				</div>
				<div class="mui-card-footer">
					规格：40枚/盒 共4盒
				</div>
				<div class="mui-card-footer">
					产地：日本
				</div>
				<div class="mui-card-footer">
					保质期：5年
				</div>
				<div class="mui-card-footer">
					包装：有盒有塑封
				</div>
				<div class="mui-card-footer">
					部分海外商品以批次区分，无保质期，堆糖只选择新鲜批次，请放心采购。
				</div>
				<div class="mui-card-content-inner mui-extra-discount ">
					<img style="width: 100%;" src="img/member1.png" /> 此款化妆棉不会吸收多余水分，倒取液体时可减少用量，避免浪费，不要靠近货源，棉质质地极易容易着火。
				</div>
				<div class="mui-card-content-inner mui-extra-discount">
					这个产品属于化妆工具，是辅助类产品，本身没有任何美肤功效。
				</div>

			</div>
			<!--购买须知-->
			<div class="mui-card">
				<div class="mui-card-content mui-koubei">购买须知</div>
				<div class="mui-card-content-inner">
				</div>
				<div class="mui-card-content-inner">
					<li>发货时间：</li>
					<li>下单后1-2个工作日发货，遇到节假日会有相应调整。</li>
					<li>配送范围：</li>
					<li>全国（新疆、西藏、内蒙古、港澳台等偏远地区除外）。</li>
					<li>退货须知：</li>
					<li>堆糖商店为您推荐商家的口碑精选商品，收到商品7日内如有质量问题，请及时联系堆糖客服小助手</li>
					<li>注意事项：</li>
					<li>国外商品经常更换包装及附件，同一款商品可能存在不同包装和生产日期。详情中商品图片、信息及附件仅供参考。 国外包装主义环保和便携，部分商品是无盒无封口的简单包装、环保喷印保质期或编码，在长途运输中容易磨损，都属于正常现象。
					</li>
					<li>客服QQ：</li>
					<li>800065827（工作日10:00-18:00）。</li>
				</div>
				<div class="mui-card-content mui-koubei">
					联系客服
				</div>
				<div class="mui-card-footer">

				</div>

			</div>
			<!--购买须知-->
		</div>
		<div class="extra_div">

		</div>

		<div class="footer_shop">
			<ul class="ul">
				<li>
					<a href="">
						<span class="navbar-label">加入购物车</span>
					</a>
				</li>
				<a href="#picture">
					<li class="li1 f_red">
						<span class="navbar-label f_white   mui-btn-outlined">立即购买</span>
					</li>
				</a>
			</ul>
		</div>

		<div id="picture" class=" mui-popover mui-popover-action mui-popover-bottom mui_buy">
			<div class="mui-card-header mui-card-media">
				<img src="img/member1.png" />
				<div class="mui-card-content-inner">
					<p><span>尤妮佳超级省水化妆棉 40/枚盒</span>
						<span style="color: red;">￥72</span></p>
				</div>
			</div>
			<div class="mui-card-content-inner f_14">
				<span class="mui-card-footer_span">享包邮</span>
				<span class="mui-card-content-inner">满88元享受包邮</span>
				<span class="mui-card-content-inner">邮费:￥8.00</span>
			</div>
			<div class="mui-card-footer">
				选择数量:
				<div class="mui-numbox">
					<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
					<input class="mui-input-numbox" type="number" />
					<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				</div>
			</div>
			<a href="#">
				<div class="mui-card-footer mui-buy1">
					<span id="alert" class="mui-title mui-buy2  mui-btn-outlined">立即支付</span>
				</div>
			</a>
			</a>
		</div>
		<div id="info">

		</div>
	</body>
	<script src="../common/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="../common/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../common/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		mui.init({
						swipeBack: true //启用右滑关闭功能
					});
		var info = document.getElementById("info");
		document.getElementById("alert").addEventListener('tap', function() {
			mui.alert('现在人数很多，请稍后再试', '非常抱歉', function() {

			});
		});
	</script>
	<script type="text/javascript">
		//轮播
		var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				paginationClickable: true,
				speed: 300,
				autoplayDisableOnInteraction: false,
				loop: true,
			}

		);
	</script>

</html>